import React, { useState, useEffect } from 'react';
import './index.scss';
import { Checkbox } from 'antd-mobile';
import { connect } from 'react-redux'
import { editCartAction } from '../../store/actions/cart';
import { preOrder } from '../../api/order';

const Cart = (props) => {
    const [num, setNum] = useState(0);
    const [sum, setSum] = useState(0);
    useEffect(() => {
        getSum();
    }, [])

    const changeChecked = (id, e) => {
        let list = props.cart.map(item => {
            if (item.id === id) {//找到需要更改 选中状态的id
                item.checked = e;
            }
            return item;
        })

        //调用 store中的动作
        props.editCartAction(list);
        getSum();
    }
    const quanxuan = (e) => {
        let list = props.cart.map(item => {
            item.checked = e;
            return item;
        })
        //调用 store中的动作
        props.editCartAction(list);
        getSum();
    }

    const getSum = () => {
        let sum = 0;
        let num = 0;
        let data = [...props.cart];
        data.filter(v => {
            if (v.checked) {//选中状态，需要计算总价格
                sum += v.price * v.num;
                num += v.num;
            }
            return null
        })
        setNum(num);
        setSum(sum);
    }
    const addFn = (id) => {
        let list = props.cart.map(item => {
            if (item.id === id) {
                item.num++;
            }
            return item;
        })
        //调用 store中的动作
        props.editCartAction(list);
        getSum();
    }

    const deceFn = (id) => {
        let list = props.cart.map(item => {
            if (item.id === id) {
                item.num--;
            }
            return item;
        })
        //调用 store中的动作
        props.editCartAction(list);
        getSum();
    }
    const jiesuanFn = () => {
        const list = props.cart;
        let cartId = [];//选中的商品的cartId
        let cartList = [];//选中的商品的数组
        list.forEach(item => {
            if (item.checked) {
                cartId.push(item.cartId);
                cartList.push(item);
            }
        });
        //调用 生成预订单的接口
        preOrder({
            cartId: cartId,
            totalMoney:sum
        }).then(res => {
            if (res.data.code === 666) {
                //跳转页面
                props.history.push({
                    pathname: "/ordersubmit", state: { cartList, preOrderId: res.data.result.preOrderId, sum: sum }
                });
            }
        })
    }
    return (
            <div className='cartView'>

                {
                    props.cart.length === 0 ? <div className='null'>
                        <img src='https://hotkidceo-1251330842.file.myqcloud.com/static/pictures/cart-empty-2.png' alt='https://hotkidceo-1251330842.file.myqcloud.com/static/pictures/cart-empty-2.png'></img>
                        <p>零食告急！购物车是空的哦</p>
                    </div> : <div className='have'>
                        <div className='cart_top'>
                            <div className='top_text'>
                                <span className='noBao'>不包邮，全场满79.00包邮</span>
                                <span>编辑</span>
                            </div>
                            <div className='cart_wangzai'>
                                <div className='wangzai_left'>
                                    <img src='https://hotkidceo-1251330842.file.myqcloud.com/static/icons/store-red.png' alt='https://hotkidceo-1251330842.file.myqcloud.com/static/icons/store-red.png' />
                                    <span>旺仔旺铺</span>
                                </div>
                                <div className='wangzai_right'>
                                    <span>领劵 &gt;</span>
                                </div>
                            </div>
                        </div>

                        <div className='commodity'>
                            <div className='giftWrap'>
                                <img src='https://hotkidceo-1251330842.file.myqcloud.com/static/home/gift.png' alt='https://hotkidceo-1251330842.file.myqcloud.com/static/home/gift.png' />
                                <div className='giftWrap1'>
                                    <span className='giftWrap_text'>满9.9元下单可获赠品1件</span><br></br>
                                    <span className='giftWrap_text'>还差<span className='giftWrap_9'>9.9</span>元</span>
                                </div>
                                <div className='giftWrap2'>
                                    <span className='checkActive'>查看活动 &gt;</span>
                                </div>
                            </div>
                            <ul className='commodity_item'>
                                {
                                    props.cart.map(item => <li className='commodity_li' key={item.id}>
                                        <div className='commodity_li_checkbox'>
                                            <Checkbox className='checkAll'
                                                checked={item.checked}
                                                onChange={(e) => { changeChecked(item.id, e) }} style={{
                                                    '--icon-size': '16px',
                                                    '--font-size': '14px',
                                                    '--gap': '6px',
                                                }}

                                            ></Checkbox>
                                        </div>
                                        <div className='commodity_li_img'> <img src={item.pic} alt={item.pic}></img></div>
                                        <div className='commodity_li_name'>
                                            <span className='commodity_pro-name'>{item.name}</span>
                                            <span className='commodity_pro-name'>{item.description}</span>
                                            <span className='commodity_price'>
                                                <div className='price'>
                                                    <span className='price1'>￥</span>
                                                    <span className='price1'>{item.price}</span>
                                                </div>
                                                <div className='input-box'>
                                                    <span onClick={() => { deceFn(item.id) }} className='input-box_de'>-</span>
                                                    <span className='input-box_num'>{item.num}</span>
                                                    <span onClick={() => { addFn(item.id) }} className='input-box_in'>+</span>
                                                </div>
                                            </span>
                                        </div>
                                    </li>)
                                }
                            </ul>
                        </div>

                        <div className='cart_bottom'>
                            <div><Checkbox className='checkAll' type="checkbox" checked={props.cart.length && props.cart.every(v => v.checked)} onChange={(e) => { quanxuan(e) }} style={{
                                '--icon-size': '16px',
                                '--font-size': '14px',
                                '--gap': '6px',
                            }}>全选</Checkbox></div>
                            <div className='cart_bottom_right'>
                                <span className='span1'>不含运费</span>
                                <span className='span2'>合计：</span>
                                <span className='span3'><span>￥</span>{sum}</span>
                                <button onClick={jiesuanFn} className={num !== 0 ? "btn1" : "btn0"}>去结算({num})</button>
                            </div>
                        </div>
                    </div>
                }
            </div>
        )
}
// class Cart extends Component {
//     constructor() {
//         super();
//         this.state = {
//             num: 0,//总数量
//             sum: 0//总价格
//         }
//     }
//     componentDidMount() {
//         this.getSum();
//     }
//     //切换 checked的状态值
//     changeChecked = (id, e) => {
//         let list = this.props.cart.map(item => {
//             if (item.id === id) {//找到需要更改 选中状态的id
//                 item.checked = e;
//             }
//             return item;
//         })

//         console.log(list);
//         //调用 store中的动作
//         this.props.editCartAction(list);
//         this.getSum();
//     }
//     //全选功能实现
//     quanxuan = (e) => {
//         console.log(e);
//         let list = this.props.cart.map(item => {
//             item.checked = e;
//             return item;
//         })
//         console.log(list);
//         //调用 store中的动作
//         this.props.editCartAction(list);
//         this.getSum();
//     }

//     //计算总数量和总价格
//     getSum = () => {
//         let sum = 0;
//         let num = 0;
//         let data = [...this.props.cart];
//         data.filter(v => {
//             if (v.checked) {//选中状态，需要计算总价格
//                 sum += v.price * v.num;
//                 num += v.num;
//             }
//             return null
//         })
//         console.log(sum);
//         this.setState({ sum: sum, num: num })
//     }
//     addFn = (id) => {
//         let list = this.props.cart.map(item => {
//             if (item.id === id) {
//                 item.num++;
//             }
//             return item;
//         })
//         //调用 store中的动作
//         this.props.editCartAction(list);
//         this.getSum();
//     }

//     deceFn = (id) => {
//         let list = this.props.cart.map(item => {
//             if (item.id === id) {
//                 item.num--;
//             }
//             return item;
//         })
//         //调用 store中的动作
//         this.props.editCartAction(list);
//         this.getSum();
//     }
//     jiesuanFn = () => {
//         const list = this.props.cart;
//         let cartId = [];//选中的商品的cartId
//         let cartList = [];//选中的商品的数组
//         list.forEach(item => {
//             if (item.checked) {
//                 cartId.push(item.cartId);
//                 cartList.push(item);
//             }
//         });
//         //调用 生成预订单的接口
//         preOrder({
//             cartId: cartId,
//             totalMoney: this.state.sum
//         }).then(res => {
//             if (res.data.code === 666) {
//                 //跳转页面
//                 this.props.history.push({
//                     pathname: "/ordersubmit", state: { cartList, preOrderId: res.data.result.preOrderId, sum: this.state.sum }
//                 });
//             }
//         })
//     }
//     render() {
//         const { cart } = this.props;
//         const { sum, num } = this.state;
//         
//     }
// }

export default connect(
    state => ({ cart: state.cart })
    , { editCartAction }
)(React.memo(Cart));
